<template>
  <div class="panel">
    <el-form  :model="regForm" status-icon :rules="regRules" ref="regForm">
      <el-form-item label="姓名：" label-width="95px" prop="realName">
        <el-input type="text" placeholder="真实姓名" :maxlength="20" size="large" v-model="regForm.realName" > </el-input>
      </el-form-item>
      <el-form-item label="性别：" label-width="95px" prop="sex">
      <el-select v-model="regForm.sex" placeholder="性别" style="width:100%;">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生日：" label-width="95px" prop="birth">
        <el-date-picker style="width:100%;" v-model="regForm.birth" type="date" format="yyyy-MM-dd" placeholder="出生日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="身份证号：" label-width="95px" prop="cardNum">
        <el-input type="number" placeholder="身份证号" :maxlength="18" size="large" v-model="regForm.cardNum" > </el-input>
      </el-form-item>
      <el-form-item prop="cardPic">
        <el-upload
          class="upload-demo"
          drag
          action="https://upload-z2.qiniup.com"
          :data="postData"
          :on-success="handleAvatarSuccess"
          multiple>
          <img v-if="imageUrl" :src="imageUrl" style="width:360px;height:180px" class="avatar">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item style="width:100%;" class="login-btn">
        <el-button type="primary" size="large" style="width:100%;" @click.native.prevent="regSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      var validateUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入内容！'))
        } else {
          callback();
        }
      }
      return {
        postData: {
          token: '-wB7gbMbeR_0yOZ_Pige0M_YtUHPTBsggN6fj6lB:O5c_Nj6pxed4S1mDw7oUbfq9ey0=:eyJzY29wZSI6ImNyaXNtIiwiZGVhZGxpbmUiOjE1MjA5NzM3MTJ9'
        },
        imageUrl: '',
        logining: false,
        loadShow: true,
        regForm:{
          realName:'',
          cardNum:'',
          cardPic: ''
        },
        regRules:{
          realName: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          cardNum: [
            { required: true, validator: validateUserName, trigger: 'blur' },
            { min: 18, max: 18, message: '请输入正确的身份号码！', trigger: 'blur' }
          ],
         cardPic: [
           { required: true, validator: validateUserName, trigger: 'blur' }
          ],
         sex: [
            { required: true, message: '请选择性别！', trigger: 'change' }
          ],
          birth: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ]
        }, 
      }
    },
    created () {
      this.regForm.name = JSON.parse(sessionStorage.getItem('u')).name
    },
    methods: {
      handleAvatarSuccess (res, file) { // 上传成功后在图片框显示图片
        this.imageUrl = 'http://p24hjnsdi.bkt.clouddn.com/' + res.key
        console.log(res)
      },
      handleError (res) { // 显示错误
        console.log(res)
      },
      beforeAvatarUpload (file) { // 在图片提交前进行验证
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isPNG && isLt2M
      },
      regSubmit(){
        var _this = this
        _this.regForm.cardPic = _this.imageUrl
        this.$refs.regForm.validate((valid) => {
          if (valid) {
            this.$ajax.post('/api/c/becomeAuthor',
              _this.regForm
              ).then(function(response){         
              }).catch(function(error){console.log(error)})
          } else {
            return false;
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
.panel{
  width: 360px;
  margin-left: 20px;
  margin-bottom: 60px;
}
</style>
